<template>
  <div class="driverCheck">
    <div>
      <!-- 详情内容 -->
      <div class="details-content">
        <!-- 身份证 -->
        <div style="display: flex;flex-wrap: nowrap;height: 300px;">
          <!-- 身份证 左侧-->
          <div class="driving-license-left">
            <div class="driving-license-title">身份证</div>
            <div
              style="margin-left: 20px;display: flex;flex-wrap: nowrap;justify-content:flex-start;width: 90%;"
            >
              <div>
                <h4>正面</h4>
                <div class="info">
                  <div>
                    <upload
                      :image-url="idInfoForm.frontImg"
                      usage-name="frontImg"
                      @handleSucces="handleSucces"
                      @handleError="handleError"
                    />
                  </div>
                  <div class="sel-button">
                    <el-button class="button" :type="frontCheckStatusSuccess == 0 ? 'success' : 'danger'" icon="el-icon-check" circle @click="frontCheckStatus(1)" />
                    <el-button class="button" :type="frontCheckStatusFall == 0 ? 'info' : 'danger'" icon="el-icon-close" circle @click="frontCheckStatus(0)" />
                  </div>
                </div>
              </div>
              <div>
                <h4 style="margin-left: 40px;">背面</h4>
                <div class="info" style="margin-left: 40px;">
                  <div>
                    <upload
                      :image-url="idInfoForm.backImg"
                      usage-name="frontImg"
                      @handleSucces="handleSucces"
                      @handleError="handleError"
                    />
                  </div>
                  <div class="sel-button">
                    <el-button class="button" :type="backCheckStatusSuccess == 0 ? 'success' : 'danger'" icon="el-icon-check" circle @click="backCheckStatus(1)" />
                    <el-button class="button" :type="backCheckStatusFall == 0 ? 'info' : 'danger'" icon="el-icon-close" circle @click="backCheckStatus(0)" />
                  </div>
                </div>

              </div>
            </div>
          </div>
          <!-- 身份证 右侧-->
          <div class="driving-license-right">
            <div style="margin: 20px;">
              <el-form ref="idInfoForm" :model="idInfoForm" :rules="idInfoRules" label-width="120px">
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="手机号：" prop="mobile">
                      <el-input v-model="driverInfoForm.mobile" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="性别：" prop="gender">
                      <el-input v-model="idInfoForm.gender" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="姓名：" prop="name">
                      <el-input v-model="idInfoForm.name" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="民族：" prop="nationality">
                      <el-input v-model="idInfoForm.nationality" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="身份证住址：" prop="address">
                      <el-input v-model="idInfoForm.address" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="有效期起：" prop="usefulStartTime">
                      <el-date-picker
                        v-model="idInfoForm.usefulStartTime"
                        type="date"
                        style="width: 100%;"
                        placeholder="选择日期"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="身份证号码：" prop="id">
                      <el-input v-model="idInfoForm.id" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="有效期至：" prop="usefulEndTime">
                      <el-date-picker
                        v-model="idInfoForm.usefulEndTime"
                        type="date"
                        placeholder="选择日期"
                        style="width: 100%;"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="发证机关：" prop="sendCertificateOffice">
                      <el-input v-model="idInfoForm.sendCertificateOffice" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 驾驶证 -->
        <div style="display: flex;flex-wrap: nowrap;height: 300px;">
          <!-- 驾驶证 左侧-->
          <div class="driving-license-left">
            <div class="driving-license-title">驾驶证图片</div>
            <div class="info">
              <div style="margin-left: 20px;">
                <upload
                  :image-url="driverInfoForm.drivingLicenseImg"
                  usage-name="drivingLicenseImg"
                  @handleSucces="handleSucces"
                  @handleError="handleError"
                />
              </div>
              <div class="sel-button">
                <el-button class="button" :type="drivingLicenseCheckStatusSuccess == 0 ? 'success' : 'danger'" icon="el-icon-check" circle @click="drivingLicenseCheckStatus(1)" />
                <el-button class="button" :type="drivingLicenseCheckStatusFall == 0 ? 'info' : 'danger'" icon="el-icon-close" circle @click="drivingLicenseCheckStatus(0)" />
              </div>
            </div>

          </div>
          <!-- 驾驶证 右侧-->
          <div class="driving-license-right">
            <div style="margin: 20px;">
              <el-form
                ref="driverInfoForm"
                :model="driverInfoForm"
                :rules="driverInfoRules"
                label-width="135px"
              >
                <el-row :gutter="24">
                  <el-col :span="15">
                    <el-form-item label="机动车驾驶证号：" prop="drivingLicenseNo">
                      <el-input v-model="driverInfoForm.drivingLicenseNo" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="15">
                    <el-form-item label="有效期起：" prop="usefulStartTime">
                      <el-date-picker
                        v-model="driverInfoForm.usefulStartTime"
                        type="date"
                        placeholder="选择日期"
                        style="width: 100%;"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="15">
                    <el-form-item label="有效期至：" prop="usefulEndTime">
                      <el-date-picker
                        v-model="driverInfoForm.usefulEndTime"
                        type="date"
                        placeholder="选择日期"
                        style="width: 100%;"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="15">
                    <el-form-item label="准驾车型：" prop="readyDriveType">
                      <el-input v-model="driverInfoForm.readyDriveType" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="15">
                    <el-form-item label="发证机关：" prop="sendCertificateOffice">
                      <el-input v-model="driverInfoForm.sendCertificateOffice" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 从业资格证 -->
        <div style="display: flex;flex-wrap: nowrap;height: 220px;">
          <!-- 道路运输证 左侧-->
          <div class="driving-license-left">
            <div class="driving-license-title" style="width: 150px;">从业资格证照片</div>
            <div class="info">
              <div style="margin-left: 20px;">
                <upload
                  :image-url="driverInfoForm.employedCertificationImg"
                  usage-name="employedCertificationImg"
                  @handleSucces="handleSucces"
                  @handleError="handleError"
                />
              </div>
              <div class="sel-button">
                <el-button class="button" :type="employedCertificationStatusSuccess == 0 ? 'success' : 'danger'" icon="el-icon-check" circle @click="employedCertificationStatus(1)" />
                <el-button class="button" :type="employedCertificationStatusFall == 0 ? 'info' : 'danger'" icon="el-icon-close" circle @click="employedCertificationStatus(0)" />
              </div>
            </div>
          </div>
          <!-- 从业资格证 右侧-->
          <div class="driving-license-right">
            <div style="margin: 20px;width: 75%;">
              <el-form
                ref="driverInfoForm"
                :model="driverInfoForm"
                :rules="driverInfoRules"
                label-width="170px"
              >
                <el-form-item label="道路从业资格证编号：" prop="employedCertificationNo">
                  <el-input v-model="driverInfoForm.employedCertificationNo" />
                </el-form-item>
                <el-form-item label="从业资格证类别：" prop="employedCertificationType">
                  <el-input v-model="driverInfoForm.employedCertificationType" />
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div style="height: 260px;margin-top: 20px;">
          <div>
            <!-- 审核按钮 -->
            <div class="audit-btn">
              <el-button type="warning" @click="auditPass">审核通过</el-button>
              <el-button type="info" @click="auditNoPass">审核不通过</el-button>
            </div>
          </div>
          <div class="driving-license-title">操作日志</div>
          <div style="margin: 20px;">
            <el-table v-loading="listLoading" :data="list" highlight-current-row style="width: 100%">
              <el-table-column type="index" width="50" />
              <el-table-column property="status" label="状态" width="120" />
              <el-table-column property="name" label="操作人" width="120" />
              <el-table-column property="lastUpdateTime" label="操作时间" />
              <el-table-column property="remark" label="备注" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { parseTime } from '@/utils'
import { driverAudit, driverDetail } from '@/api/tms/driver'
import { validUserPhone } from '@/utils/validate'
import upload from '../../../components/Upload/index'
export default {
  components: {
    upload
  },
  data() {
    return {
      params: {},
      list: [],
      idInfoForm: {
        id: '',
        frontImg: '',
        backImg: '',
        mobile: '',
        gender: '',
        name: '',
        nationality: '',
        address: '',
        usefulStartTime: '',
        identity: '',
        usefulEndTime: '',
        sendCertificateOffice: ''
      },
      idInfoRules: {
        mobile: [{ required: true, message: '请填写手机号', trigger: 'blur' }],
        gender: [{ required: true, message: '请填写性别', trigger: 'blur' }],
        name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
        nationality: [{ required: true, message: '请填写民族', trigger: 'blur' }],
        address: [{ required: true, message: '请填写身份证住址', trigger: 'blur' }],
        id: [{ required: true, message: '请填写身份证号', trigger: 'blur' }],
        sendCertificateOffice: [{ required: true, message: '请填写发证机关', trigger: 'blur' }],
        usefulStartTime: [{ required: true, message: '请填写有效期起', trigger: 'blur' }],
        usefulEndTime: [{ required: true, message: '请填写有效期至', trigger: 'blur' }]
      },
      driverInfoForm: {
        mobile: '',
        drivingLicenseNo: '',
        usefulStartTime: '',
        usefulEndTime: '',
        readyDriveType: '',
        sendCertificateOffice: '',
        employedCertificationNo: '',
        employedCertificationType: '经营性道路货物运输驾驶员'
      },
      driverInfoRules: {
        drivingLicenseNo: [{ required: true, message: '请填写机动车驾驶证号', trigger: 'blur' }],
        usefulStartTime: [{ required: true, message: '请填写有效期起', trigger: 'blur' }],
        usefulEndTime: [{ required: true, message: '请填写有效期至', trigger: 'blur' }],
        readyDriveType: [{ required: true, message: '请填写准驾车型', trigger: 'blur' }],
        sendCertificateOffice: [{ required: true, message: '请填写发证机关', trigger: 'blur' }]
      },
      listLoading: false,
      remark: '', // 审核不通过原因
      auditInfo: '', // 审核状态
      drivingLicenseCheckStatusSuccess: 0,
      drivingLicenseCheckStatusFall: 0,
      employedCertificationStatusSuccess: 0,
      employedCertificationStatusFall: 0,
      frontCheckStatusSuccess: 0,
      frontCheckStatusFall: 0,
      backCheckStatusSuccess: 0,
      backCheckStatusFall: 0
    }
  },
  created() {
    this.params = this.$route.params
    this.detail()
  },
  methods: {
    handleSucces(response) {
      console.log(response)
      switch (response.usageName) {
        case 'frontImg':
          this.idInfoForm.frontImg = response.url
          break
        case 'backImg':
          this.idInfoForm.backImg = response.url
          break
        case 'drivingLicenseImg':
          this.driverInfoForm.drivingLicenseImg = response.url
          break
        case 'employedCertificationImg':
          this.driverInfoForm.employedCertificationImg = response.url
          break
      }
    },
    handleError() {

    },
    frontCheckStatus(status) {
      this.frontCheckStatusSuccess = status === 1 ? 1 : 0
      this.frontCheckStatusFall = status === 0 ? 1 : 0
    },
    backCheckStatus(status) {
      this.backCheckStatusSuccess = status === 1 ? 1 : 0
      this.backCheckStatusFall = status === 0 ? 1 : 0
    },
    drivingLicenseCheckStatus(status) {
      this.drivingLicenseCheckStatusSuccess = status === 1 ? 1 : 0
      this.drivingLicenseCheckStatusFall = status === 0 ? 1 : 0
    },
    employedCertificationStatus(status) {
      this.employedCertificationStatusSuccess = status === 1 ? 1 : 0
      this.employedCertificationStatusFall = status === 0 ? 1 : 0
    },
    checkData() {
      this.drivingLicenseCheckStatusSuccess = this.driverInfoForm.drivingLicenseCheckStatus === 'SUCCESS' ? 1 : 0
      this.drivingLicenseCheckStatusFall = this.driverInfoForm.drivingLicenseCheckStatus === 'FALL' ? 1 : 0
      this.employedCertificationStatusSuccess = this.driverInfoForm.employedCertificationStatus === 'SUCCESS' ? 1 : 0
      this.employedCertificationStatusFall = this.driverInfoForm.employedCertificationStatus === 'FALL' ? 1 : 0
      this.frontCheckStatusSuccess = this.idInfoForm.frontCheckStatus === 'SUCCESS' ? 1 : 0
      this.frontCheckStatusFall = this.idInfoForm.frontCheckStatus === 'FALL' ? 1 : 0
      this.backCheckStatusSuccess = this.idInfoForm.backCheckStatus === 'SUCCESS' ? 1 : 0
      this.backCheckStatusFall = this.idInfoForm.backCheckStatus === 'FALL' ? 1 : 0
    },
    detail() {
      driverDetail(this.params.id).then((response) => {
        this.idInfoForm = response.tmsIdentityCardInfoPo
        this.driverInfoForm = response.tmsDriverPo
        this.idInfoForm.mobile = this.driverInfoForm.mobile
        this.checkData()
        console.log(this.idInfoForm)
        console.log(this.driverInfoForm)
      })
    },
    audit() {
      // 司机审核
      var data = {}
      Object.assign(
        data,
        this.idInfoForm,
        this.driverInfoForm
      )
      data.drivingLicenseCheckStatus = this.drivingLicenseCheckStatusSuccess === 1 ? 'SUCCESS' : 'FALL'
      data.employedCertificationStatus = this.employedCertificationStatusSuccess === 1 ? 'SUCCESS' : 'FALL'
      data.frontCheckStatus = this.frontCheckStatusSuccess === 1 ? 'SUCCESS' : 'FALL'
      data.backCheckStatus = this.backCheckStatusSuccess === 1 ? 'SUCCESS' : 'FALL'
      data.idCardUsefulStartTime = this.idInfoForm.usefulStartTime
      data.idCardUsefulEndTime = this.idInfoForm.usefulEndTime
      data.idCardSendCertificateOffice = this.idInfoForm.sendCertificateOffice
      data.idCardUsefulStartTime = parseTime(this.idInfoForm.usefulStartTime)
      data.idCardUsefulEndTime = parseTime(this.idInfoForm.idCardUsefulEndTime)
      data.usefulStartTime = parseTime(this.driverInfoForm.usefulStartTime)
      data.usefulEndTime = parseTime(this.driverInfoForm.usefulEndTime)
      data.remark = this.remark
      data.auditInfo = this.auditInfo
      console.log(data)
      driverAudit(data).then(() => {
        this.$message({
          type: 'success',
          message: '审核成功!'
        })
        this.$router.go(-1)
      })
    },
    // 审核通过
    auditPass() {
      this.$refs['idInfoForm'].validate((valid) => {
        if (valid) {
          this.$refs['driverInfoForm'].validate((validV) => {
            if (validV) {
              console.log('审核状态  通过', this.auditInfo)
              this.$confirm('是否确认审核通过?', '提示', {
                title: '审核通过',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.auditInfo = 'SUCCESS'
                console.log('===============')
                this.audit()
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消审核'
                })
              })
            }
          })
        }
      })
    },
    // 审核不通过
    auditNoPass() {
      this.auditInfo = 'FALL'
      console.log('审核状态  不通过', this.auditInfo)
      this.$prompt('不通过原因', '提示', {
        title: '审核不通过',
        inputPlaceholder: '请输入不通过理由',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputErrorMessage: '输入不能为空',
        inputValidator: (value) => {
          if (!value) {
            return '输入不能为空'
          }
        }
      }).then((value) => {
        this.auditInfo = 'FALL'
        this.remark = value.value
        this.audit()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消不通过'
        })
      })
    }
  }

}
</script>
<style lang="scss">
.driverCheck {
	padding: 30px 0;

	.details-content {
		border: 1px solid #E4E4E4;
		width: 95%;
		margin: 0 auto;
		height: 1150px;
	}

	.driving-license-left {
		border-bottom: 1px solid #E4E4E4;
		border-right: 1px solid #E4E4E4;
		width: 35%;
	}

	.driving-license-title {
		border-left: 2px solid #FFB500;
		width: 100px;
		text-align: center;
		font-size: 16px;
		margin: 20px;
	}

	.driving-license-right {
		border-bottom: 1px solid #E4E4E4;
		width: 65%;
		/* margin: 20px; */
	}

	.audit-btn {
		text-align: center;
	}

	.dialog-footer {
		margin-top: 30px;
		display: flex;
		justify-content: center;
	}
}
.info{
	display: flex;
	.sel-button{
		display: grid;
		justify-items: center;
		align-items: center;
		.button{
			margin-left: 10px;
			width: 30px;
			height: 30px;
			justify-content: center;
			display: flex;
			align-items: center;
			font-size: 20px;
		}
	}
}
</style>
